<template>
  <div class="base_wrap">
    <table-title width="100%" title-text="课程信息"></table-title>
    <div class="base_info">
      <div class="base_left">
        <el-form
          :rules="rulObj"
          :model="formObj"
          label-width="100px"
          label-position="left"
          ref="courseform"
        >
          <el-form-item label="课程名称：" prop="Cname">
            <div>
              <el-input v-model="formObj.Cname"></el-input>
              <span>60字以内</span>
            </div>
          </el-form-item>
          <el-form-item prop="Cdescribe" label="课程描述：">
            <div>
              <el-input v-model="formObj.Cdescribe"></el-input>
              <span>100字以内</span>
            </div>
          </el-form-item>
          <el-form-item prop="Cprice" label="课程价格：">
            <div>
              <el-input v-model="formObj.Cprice"></el-input>
              <span>课程以元为单位,免费课程为0元</span>
            </div>
          </el-form-item>
          <el-form-item class="mysel" label="专业选择：">
            <el-select v-model="formObj.CategoryOne">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in opt1"
                :key="index"
              ></el-option>
            </el-select>
            <el-select v-model="formObj.CategoryTwo">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in opt2"
                :key="index"
              ></el-option>
            </el-select>
            <el-select v-model="formObj.CategoryThree">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in opt3"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toAddCourse">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="base_right">
        <div class="img_wrap">
          <h3>课程封面</h3>
          <div class="img_info">
            <img :src="'http://localhost:3000' + cacheName" alt="" />
          </div>
          <div class="link_wrap">
            <el-link type="warning" @click="clear">取消</el-link>
            <el-link type="success" @click="startup">上传</el-link>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="coverFlag" title="选择课程封面" width="40%">
      <div class="sel_cover" v-show="layFlag">
        <el-upload
          ref="upload"
          action="http://localhost:3000/VueHandler/UpLoadPicHandler"
          :on-change="getFile"
          :auto-upload="false"
          :on-success="getUpData"
          :show-file-list="false"
        >
          <el-button type="success">选择课程封面</el-button>
        </el-upload>
      </div>
      <div class="sure_sel" v-show="!layFlag">
        <img :src="myUrl" alt="" />
        <span slot="footer">
          <el-button type="success" @click="subMitLoad">确定</el-button>
          <el-button type="danger">取消</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- 添加成功的遮罩 -->
    <div
      class="base_cover"
      v-if="sucCover && $route.query.isEdit != 'true'"
    ></div>
  </div>
</template>
<script>
import cateData from '../../Mixins/cate'
import { _addCourse, _getCourse } from '../../api/course'
export default {
  mixins: [cateData],
  data () {
    return {
      coverFlag: false, //选择课程封面的弹出层
      layFlag: true,
      myUrl: '',
      cacheName: '', //后台返回的图片封面地址
      rulObj: {
        //表单验证规则
        Cname: [
          { required: true, message: '课程名称必填', trigger: 'blur' },
          { max: 60, min: 3, message: '长度是3-60', trigger: 'blur' }
        ],
        Cdescribe: [
          { required: true, message: '课程描述必填', trigger: 'blur' },
          { max: 100, min: 3, message: '长度是3-60', trigger: 'blur' }
        ],
        Cprice: [
          { required: true, message: '课程价格必填', trigger: 'blur' },
          {
            pattern: /^\d{1,4}\.?\d{0,2}$/,
            message: '不符合规则',
            trigger: 'blur'
          }
        ]
      },
      formObj: {
        //表单需要绑定的数据
        Cname: '',
        Cdescribe: '',
        Cprice: '',
        CategoryOne: '',
        CategoryTwo: '',
        CategoryThree: ''
      },
      sucCover: false,
      courseList: {}, //获取到的课程信息
      dirlist: [] //目录信息
    }
  },
  created () {
    //如果地址栏中有课程_id 获取课程信息
    if (this.$route.query.ID) {
      _getCourse(this.$route.query.ID).then(res => {
        console.log(res)
        this.formObj = res.data.data.courselist
        this.cacheName = res.data.data.courselist.Cpic //课程封面

        // 把获取的课程基本信息中的目录列表传给兄弟组件
        this.$bus.$emit('senddir', res.data.data.dirlist)
        this.sucCover = true
      })
    }
  },
  methods: {
    toAddCourse () {
      //添加课程
      this.$refs.courseform.validate(async vali => {
        if (vali) {
          if (this.cacheName) {
            this.$set(this.formObj, 'Cpic', this.cacheName)
            console.log(this.formObj)
            var res = await _addCourse(this.formObj)
            console.log(res)
            this.$message.success('课程保存成功')
            this.sucCover = true
            // 添加课程后 将课程id存储到地址栏
            this.$router.push({
              name: 'courseadd',
              query: {
                ID: res.data.ID,
                _id: res.data._id
              }
            })
          } else {
            this.$message.error('请先上传课程封面')
          }
        }
      })
    },

    startup () {
      this.coverFlag = true
      this.layFlag = true
    },
    getFile (file) {
      console.log(file)
      // 用图片文件数据包 制作缩略图地址
      var url = URL.createObjectURL(file.raw)
      this.myUrl = url
      this.layFlag = false //切换布局
    },
    subMitLoad () {
      //手动上传方法
      this.$refs.upload.submit()
    },
    getUpData (res) {
      //上传成功后的回调
      console.log(res)
      if (res.success) {
        this.cacheName = res.cacheName
        this.coverFlag = false
      }
    },
    clear () {
      console.log(1231)
      this.myUrl = ''
      this.cacheName = ''
    }
  }
}
</script>
<style lang="less">
.base_wrap {
  width: 80%;
  height: 400px;
  position: relative;
  .base_info {
    display: flex;
    .base_left {
      width: 60%;
      margin-top: 30px;
      .el-form-item__content {
        > div {
          display: flex;
          .el-input {
            width: 400px;
            margin-right: 30px;
          }
        }
      }
      .mysel {
        .el-form-item__content {
          display: flex;
          .el-select {
            width: 200px;
          }
        }
      }
    }
    .base_right {
      width: 40%;
      margin-top: 20px;
      padding-left: 50px;
      box-sizing: border-box;
      .img_wrap {
        text-align: center;
        width: 280px;
        height: 300px;
        .img_info {
          width: 280px;
          height: 260px;
          border: 1px solid white;
          img {
            width: 260px;
            height: 260px;
          }
        }
        .link_wrap {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
.sure_sel {
  img {
    width: 200px;
    height: 200px;
  }
}
.base_cover {
  width: 100%;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
</style>
